<template>
    <div class="leave-apply">
        <apply-header process-name="请假流程" @cancel-click="cancelClick" @submit-click="submit"/>
        <div class="apply-content">
            <el-form ref="formRef" :model="leave" :rules="rules" label-position="left" label-width="130px" label-suffix="：">
                <form-title title="请假申请"/>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="startUser" style="display: none">
                            <el-input v-model="leave.startUser"/>
                        </el-form-item>
                        <el-form-item prop="startUserName" label="申请人">
                            <el-input v-model="this.leave.startUserName" style="width: 200px" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="holidayType" label="请假类型">
                            <el-select-v2 :options="typeData" v-model="leave.holidayType" filterable placeholder="选择请假类型">
                                <template #default="{item}">
<!--                                    {{item.value}}-->
                                    <div style="width: 100%" @click="showTypeName(item)">{{item.label}}</div>
                                </template>
                            </el-select-v2>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="请假开始日期" prop="beginDate2">
                            <el-date-picker type="date" placeholder="请假开始日期" v-model="leave.beginDate2" value-format="YYYY-MM-DD" @change="convertDate"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="time-select">
                        <el-form-item label="请假开始时间" prop="beginTime2">
                            <el-time-select v-model="leave.beginTime2" start="08:00" step="00:15" end="24:00" placeholder="请假开始时间" @change="convertDate"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="请假结束日期" prop="endDate2">
                            <el-date-picker type="date" placeholder="请假结束日期" v-model="leave.endDate2" value-format="YYYY-MM-DD" @change="convertDate"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="time-select">
                        <el-form-item label="请假结束时间" prop="endTime2">
                            <el-time-select v-model="leave.endTime2" start="08:00" step="00:15" end="24:00" placeholder="请假结束时间" @change="convertDate"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="请假天数" prop="days">
                            <el-input v-model="leave.days" style="width: 120px;" disabled>
                                <template #append>天</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="请假原因" prop="cause">
                            <el-input type="textarea" placeholder="请输入请假原因" v-model="leave.cause"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="审批领导" prop="leaderAssignee">
                            <el-select-v2 :options="leaderData" v-model="leave.leaderAssignee" placeholder="请选择审批领导" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="人事审批" prop="perAssignee">
                            <el-select-v2 :options="hrSpecialist" v-model="leave.perAssignee" placeholder="请选择人事审批人员"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import ApplyHeader from "../../com/apply/ApplyHeader.vue";
import FormTitle from "../../com/apply/FormTitle.vue";
import {createLeaveProcess, queryLeaveAssessingOfficer} from "../../../network/process/leave-process";

export default {
    name: "LeaveApply",
    components: {FormTitle, ApplyHeader},
    setup(prop,{emit}){
        const formRef = ref(null);
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const form = reactive({
            leave:{
                startUserName: null,
                startUser: null,
                holidayType: null,
                holidayTypeName: null,
                beginDate2: new Date().format('yyyy-MM-dd'),
                beginTime2: null,
                endDate2: new Date().format('yyyy-MM-dd'),
                endTime2: null,
                endTime: null,
                beginTime: null,
                days: 0,
                cause: null,
                leaderAssignee: null,
                perAssignee: null,
            },
            rules:{
                startUserName: [
                    {required: true,message:'缺少审批人员',trigger:'blur'}
                ],
                holidayType: [
                    {required: true,message:'请选择请假类型',trigger:'change'}
                ],
                beginDate2: [
                    {required: true,message:'请输入开始日期',trigger:'change'}
                ],
                // beginTime2: [
                //     {required: true,message:'请输入开始时间',trigger:'change'},
                // ],
                endDate2: [
                    {required: true,message:'请输入结束日期',trigger:'change'},
                ],
                // endTime2: [
                //     {required: true,message:'请输入结束时间',trigger:'change'},
                // ],
                cause: [
                    {required: true,message:'请输入请假原因',trigger:'blur'},
                ],
                leaderAssignee: [
                    {required: true,message:'请输入选择审批领导',trigger:'blur'},
                ],
                perAssignee: [
                    {required: true,message:'请输入选择人事审批人员',trigger:'blur'},
                ],
            },
            submit(){
                formRef.value.validate((valid)=>{
                    if(valid){
                        let loading = ElLoading.service({
                            lock: true,
                            text: '正在创建请假申请...',
                        });
                        form.leave.beginTime = form.leave.beginDate2 + ' ' + (form.leave.beginTime2?form.leave.beginTime2:'00:00');
                        form.leave.endTime = form.leave.endDate2 + ' ' + (form.leave.endTime2?form.leave.endTime2:'00:00');
                        createLeaveProcess(form.leave).then(vo=>{
                            loading.close();
                            globalProperties.$response.handle({
                                data:vo,
                                success:'会议申请成功...',
                                successFn:()=>{
                                    form.resetForm();
                                    // let returnUrl = this.$route.query.returnUrl;
                                    // if(returnUrl){
                                    //     globalProperties.$router.push(returnUrl);
                                    // }
                                },
                                failFn:()=>{
                                    ElMessage.error('申请失败!');
                                },
                                log: '申请结果'
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单!');
                    }
                })
            },
            resetForm(){
                formRef.value.clearValidate();
                formRef.value.resetFields();
            }
        })
        return {
            ...toRefs(form),
            formRef
        }
    },
    data(){
        return {
            leaderData: [],
            hrSpecialist: [],
        }
    },
    methods:{
        cancelClick(){
            this.$operate.confirm({
                title: '取消申请',
                hint: '你确认要取消申请吗？',
                executeFn: ()=>{
                    let returnUrl = this.$route.query.returnUrl;
                    if(returnUrl){
                        this.$router.push(returnUrl);
                        // console.log('returnUrl',returnUrl)
                    }else{
                        this.$router.push('/home');
                    }
                }
            })
        },
        showTypeName(val){
            this.leave.holidayTypeName = val.label;
        },
        convertDate(){
            //如果没有选择开始日期或结束日期，请假天数为0
            if((!this.leave.endDate2) || (!this.leave.beginDate2)){
                this.leave.days = 0;
                return;
            }
            let begin = this.leave.beginDate2 + (this.leave.beginTime2?' '+this.leave.beginTime2:'');
            let end = this.leave.endDate2 + (this.leave.endTime2?' '+this.leave.endTime2:'');
            // console.log('begin：：',begin)
            // console.log('end：：',end)
                //计算两个日期相差的天数
            this.leave.days =  this.$dateCalculator.daysBetween(begin,end);
        },
        loadAssessingOfficer(){
            queryLeaveAssessingOfficer(this.leave.startUser).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn:()=>{
                        let superior = vo.data.superior;
                        if(superior){
                            this.leaderData.push({
                                label: superior.empName,
                                value: superior.id,
                            })
                            this.leave.leaderAssignee = superior.id;
                        }
                        let hrSpecialist = vo.data.hrSpecialist;
                        for (let i=0;i<hrSpecialist.length;i++){
                            let hr = hrSpecialist[i];
                            this.hrSpecialist.push({
                                label: hr.empName,
                                value: hr.id
                            });
                            if(i === 0) this.leave.perAssignee = hr.id;
                        }
                    },
                    log: '请假审批列表'
                })
            })
        },
    },
    created() {
        let state = JSON.parse(sessionStorage.getItem('vuexSTATE'));
        // console.log('state',state);
        this.leave.startUserName = state.loginUser.empName;
        this.leave.startUser = state.loginUser.id;
        this.loadAssessingOfficer();
    },
    computed:{
        typeData(){
            let state = JSON.parse(sessionStorage.getItem('vuexSTATE'));
            return state.dictOptions['leave'];
        },
    },
    watch:{

    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.leave-apply{

}
.apply-content{
    margin: 0 auto;
    width: 1240px;
    box-shadow: 0 0 2px 1px lightgrey;
    background: rgb(252,252,252);
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
<style>
.el-select-dropdown{
    width: 210px;
}
.el-select-dropdown__item{
    width: 100%;
}
.el-time-spinner__item{
    width: 100%;
}
</style>
